<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>📥 QRTransfer Receiver - 二维码文件还原工具</title>
    <link rel="stylesheet" href="style.css">
    <meta name="theme-color" content="#4a90e2">
</head>
<body>
    <div class="container">
        <h1>📥 QRTransfer Receiver</h1>
        <p style="color: #666; margin-bottom: 20px;">二维码文件还原工具</p>

        <!-- 标签页导航 -->
        <div class="tab-nav">
            <button class="tab-btn active" data-tab="scan">📷 扫描二维码</button>
            <button class="tab-btn" data-tab="manual">📋 手动输入</button>
            <button class="tab-btn" data-tab="file">📂 上传文件</button>
        </div>

        <!-- 标签页内容 -->
        <div class="tab-content">
            <!-- 扫描二维码标签页 -->
            <div id="scan-tab" class="tab-pane active">
                <div class="section">
                    <div id="scanStatus" class="scan-status">
                        <p>📷 准备扫描二维码</p>
                        <p class="scan-hint">点击"开始连续扫码"后，将二维码对准摄像头</p>
                    </div>
                    <video id="scanner" width="300" height="300" style="background:#000; margin:10px 0;"></video>
                    <div style="text-align: center;">
                        <button id="startScan">▶ 开始扫码</button>
                        <button id="stopScan" disabled>⏹ 停止扫码</button>
                        <label style="margin-left: 15px;">
                            <input type="checkbox" id="autoMode" checked> 连续扫码模式
                        </label>
                    </div>
                </div>
            </div>

            <!-- 手动输入标签页 -->
            <div id="manual-tab" class="tab-pane">
                <div class="section">
                    <textarea id="manualInput" placeholder="每行一个二维码内容，格式：序号/总数|元数据|BASE64数据..." rows="8"></textarea>
                    <div style="text-align: center;">
                        <button id="parseManual">📥 解析输入内容</button>
                    </div>
                </div>
            </div>

            <!-- 上传文件标签页 -->
            <div id="file-tab" class="tab-pane">
                <div class="section">
                    <div style="text-align: center; padding: 20px;">
                        <input type="file" id="fileInput" accept=".txt" style="margin: 10px 0;">
                        <br>
                        <button id="parseFile">📤 解析文件</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="status">
            <p>📊 已接收 <span id="received">0</span> / <span id="total">0</span> 块</p>
            <div id="fileInfo" style="margin: 10px 0; padding: 10px; background: #f0f8ff; border-radius: 5px; display: none;">
                <h4>📄 文件信息</h4>
                <p><strong>文件名：</strong><span id="fileName">-</span></p>
                <p><strong>文件大小：</strong><span id="fileSize">-</span></p>
                <p><strong>文件类型：</strong><span id="fileType">-</span></p>
                <p><strong>校验码：</strong><span id="fileCRC32">-</span></p>
            </div>
            <div id="progressContainer" style="display: none;">
                <h4>📦 接收进度</h4>
                <div id="chunkGrid" class="chunk-grid"></div>
                <div id="chunkList" class="chunk-list"></div>
            </div>
        </div>

        <div class="action">
            <button id="restoreBtn" disabled>✅ 还原并下载文件</button>
        </div>

        <div id="log"></div>
    </div>

    <script src="umd.min.js"></script>
    <script src="app.js"></script>
</body>
</html>